<template lang="">
    <div>
        <el-dialog
            :title="title"
            :visible="dialogVisible"
            width="30%"
            :before-close="close">
            <p class="title">请输入类名名称:</p>
            <el-input v-model="name" placeholder="请输入内容"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: ['input', 'cid'],
    data() {
        return {
            dialogVisible: false,
            title: '',
            name: '',
            id: '',
        };
    },
    watch: {
        input(val) {
            this.name = val.name;
            this.id = val.id;
        }
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 一级分类名称新增-----------insertCategory----
        async insertCategory(name) {
            let res = await this.$api.insertCategory({name});
            // console.log('一级分类名称新增', res.data);
            if (res.data.status === 200) {
                this.$message.success('新增成功');
            } else {
                this.$message.error('新增失败');
            }
        },
        // 修改接口
        async updateCategory(name, id) {
            let res = await this.$api.updateCategory({ name, id });
            if (res.data.status === 200) {
                this.$message.success('修改成功');
            } else {
                this.$message.error('修改失败');
            }
        },
        // 新增子类的接口
        async insertItemCategory(cid, name) {
            let res = await this.$api.insertItemCategory({cid, name});
            console.log('新增接口--------', res.data);
            if (res.data.status === 200) {
                this.$message.success('新增成功');
            } else {
                this.$message.error('新增失败');
            }
        },
        // 确定按钮
        submit() {
            if (this.title === '修改分类名称') {
                this.updateCategory(this.name, this.id);
            } else if (this.title === '新增一级分类名称') {
                // 1.增加类目名称
                this.insertCategory(this.name);
            } else {
                // 新增---子类目录 
                this.insertItemCategory(this.cid, this.name);
            }
            // 2.隐藏弹框
            this.dialogVisible = false;
            // 3.清空输入框
            this.name = '';
            // 3.更新视图
            this.$emit('updateViews');
        },
        close() {
            this.dialogVisible = false;
            this.name = '';
        }
    }
}
</script>
<style lang="less" scoped>
.title {
    margin-bottom: 10px;
    font-weight: bold;
}    
</style>